<template>
	<view class="cart-list">
		<view class="user_address active">
			<i class="coolc icon-dizhi"></i>
			<view class="name">收货人：陈若萱</view>
			<view class="mobile">180 0797 1768</view>
			<view class="address">收货地址：江西省赣州市兴国县兴国大道252号</view>
		</view>
		<view class="user_address">
			<i class="coolc icon-dizhi"></i>
			<view class="name">收货人：陈若萱</view>
			<view class="mobile">180 0797 1768</view>
			<view class="address">收货地址：江西省赣州市兴国县兴国大道252号</view>
		</view>
		<view class="no_address" style="display:none;">
			<i class="coolc icon-comment"></i>
			<view class="text">添加收货地址</view>
		</view>
		<view class="seller_box">
			<view class="seller_name">
				<i class="coolc icon-shangjialiebiaoicon"></i>
				<b>古驰GUCCI官方旗舰店</b>
			</view>
			<view class="cart-item">
				<view class="image-wrapper">
					<image src="/static/por6.jpg"></image>
				</view>
				<view class="item-right">
					<text class="title">百达翡丽-超級复杂功能计时系列 18k黄金自动机械男表5159J-001</text>
					<span class="attr">规格: 专柜原装</span>
					<text class="price">¥607200.00</text>
					<text class="num">X 1</text>
				</view>
			</view>
			<view class="coupon_box">请选择优惠券：<b @click="popupOpen('coupon')">点击选择</b></view>
			<view class="seller_seller">- 商家优惠：<b>￥0</b></view>
			<view class="seller_total">商家总计：<b>￥607200</b></view>
		</view>
		<view class="seller_box">
			<view class="seller_name">
				<i class="coolc icon-shangjialiebiaoicon"></i>
				<b>劳力士官方旗舰店</b>
			</view>
			<view class="cart-item">
				<view class="image-wrapper">
					<image src="/static/por5.jpg"></image>
				</view>
				<view class="item-right">
					<text class="title">百达翡丽-超級复杂功能计时系列</text>
					<span class="attr">规格: 专柜原装</span>
					<text class="price">¥607200.00</text>
					<text class="num">X 1</text>
				</view>
			</view>
			<view class="coupon_box">请选择优惠券：<b @click="popupOpen('coupon')">点击选择</b></view>
			<view class="seller_seller">- 商家优惠：<b>￥0</b></view>
			<view class="seller_total">商家总计：<b>￥607200</b></view>
		</view>
		
		<view class="pay_box" @click="popupOpen('popupb')">
			<text>请选择支付方式</text>
			<view class="coolc icon-jiantouright"></view>
			<view class="pay_name">微信支付</view>
		</view>
		
		<view class="pay_box" @click="popupOpen('invoice')">
			<text>发票信息</text>
			<view class="coolc icon-jiantouright"></view>
			<view class="pay_name">不需要发票可不选</view>
		</view>
		
		<view class="message_box">
			<text>买家留言</text>
			<textarea class="formcontrol" maxlength="80" placeholder="买家留言"></textarea>
		</view>
		
		<view class="seller_box" style="padding-top:26upx; padding-bottom:130upx;">
			<view class="seller_total">共 <b>1</b> 种商品 总计：<b>￥79000</b></view>
			<view class="seller_seller">优惠券：<b>￥0.00</b></view>
			<view class="seller_total">运费：<b>￥0.00</b></view>
			<view class="seller_total">总优惠：<b>￥0</b></view>
		</view>
		
		<popup-layer ref="coupon">
			<view class="coupon_mask_box">
				<view class="title">
					请选择优惠券
					<i class="coolc icon-cuohao" @click="popupClose('coupon')"></i>
				</view>
				<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" types="carts"></coupon>
			</view>
		</popup-layer>
		
		<popup-layer ref="invoice">
			<view class="pay_mask_box">
				<view class="title">
					请选择开票信息
					<i class="coolc icon-cuohao" @click="popupClose('invoice')"></i>
				</view>
				<view class="invoice_box">
					<view class="inv active">深圳市晟艺互动传媒有限公司</view>
					<view class="inv">刘芳芳</view>
					<button type="default">添加发票信息</button>
				</view>
			</view>
		</popup-layer>
		
		<popup-layer ref="popupb">
			<view class="pay_mask_box">
				<view class="title">
					请选择支付方式
					<i class="coolc icon-cuohao" @click="popupClose('popupb')"></i>
				</view>
				<view class="zhifu_box">
					<view class="active jpay" style="padding-left:50upx;" data-id="balance">
						<img src="/static/img/payimages/balance.gif">
						<view class="balance">
							<span>余额支付</span>
							<b>¥500.00</b>
						</view>
					</view>
					<view class="jpay" style="padding-left:50upx;" data-id="alipay"><img src="/static/img/payimages/alipay.jpg"> 支付宝</view>
					<view class="jpay" style="padding-left:60upx;" data-id="wechatscan"><img src="/static/img/payimages/weixin_pay.jpg"> 微信支付</view>
					<view class="jpay" style="padding-left:70upx;" data-id="unionpay"><img src="/static/img/payimages/union.jpg"> 银联支付</view>
				</view>
			</view>
		</popup-layer>
		
		<!-- 底部菜单栏 -->
		<view class="action-section">
			<view class="total-box">
				<view class="price">￥79000</view>
				<view class="coupon">购物车合计（含运费）</view>
			</view>
			<button type="primary" class="no-border" @click="createOrder">去结算</button>
		</view>
		
	</view>
</template>

<script>
	import popupLayer from '@/components/popup-layer/popup-layer';
	import coupon from '@/components/coupon';
	export default {
		components: {
			popupLayer,
			coupon
		},
		data(){
			return {
				coupon:[{},{}],
			}
		},
		onLoad() {
			this.loadData();
		},
		methods:{
			//弹层显示隐藏
			popupOpen(ref){
				this.$refs[ref].show()
			},
			popupClose(ref){
				this.$refs[ref].close()
			},
			async loadData() {
				
				//评论数据
				let coupon = await this.$api.json('coupon');
				this.coupon = coupon;
				
			},
			zidingyi(msg){
				alert(msg);
                this.coupon = msg;
            }
		}
	}
</script>

<style lang='scss'>
	page { background:$bgcolor_white; }
	
	.user_address {
		width:100%; height:auto; display:table; border-bottom:15upx solid #f4f4f4; padding:30upx 0upx 30upx 100upx; position:relative;
		.coolc { width:100upx; height:100upx; line-height:100upx; font-size:60upx; color:$font-color-999; text-align:center; position:absolute; left:0px; top:30upx; }
		.mobile { position:absolute; right:30upx; top:30upx; font-size:$font-base; color:$font-color-999; }
		.address,.name { font-size:$font-base; color:$font-color-999; }
		
		&.active{
			background:url(/static/img/bg/gou.gif) no-repeat right top;
			padding:30upx 80upx 30upx 100upx;
			background-size:80upx auto;
			.mobile { right:80upx; }
		}
	}
	.no_address {
		width:100%; height:auto; display:table; border-bottom:15upx solid #f4f4f4; padding:30upx 0; position:relative; text-align:center;
		.coolc { display: inline-block; margin-right:15upx; font-size:36upx; }
		.text { display: inline-block; font-size:32upx; }
	}
	
	.pay_box {
		width:100%; height:95upx; padding:10upx 26upx; position:relative; border-bottom:15upx solid #f4f4f4;
		
		text { height:60upx; line-height:60upx; display:block; float:left; color:$font-color-999; }
		.coolc { height:60upx; line-height:60upx; display:block; float:right; font-size:32upx; }
		.pay_name { height:60upx; line-height:60upx; display:block; float:right; padding-right:10upx; }
	}
	
	.message_box {
		width:100%; height:auto; display:table; padding:26upx; position:relative; border-bottom:15upx solid #f4f4f4;
		
		.formcontrol { width:100%; border:1px solid #eeeeee; padding:12upx; border-radius:10upx; margin-top:10upx; }
	}
	
	.coupon_mask_box {
		width:100%; height:auto; display:table; padding:26upx;
		.title {
			width:100%; height:50upx; line-height:40upx; font-size:$font-lg; display:block; position:relative;
			.coolc { width:40upx; height:40upx; line-height:40upx; font-size:24upx; text-align:center; border:1px solid #ccc; color:#ccc; border-radius:40upx; display:block; position:absolute; right:0upx; top:0upx; }
		}
	}

	.pay_mask_box {
		width:100%; height:auto; display:table; padding:26upx;
		.title {
			width:100%; height:50upx; line-height:40upx; font-size:$font-lg; display:block; position:relative;
			.coolc { width:40upx; height:40upx; line-height:40upx; font-size:24upx; text-align:center; border:1px solid #ccc; color:#ccc; border-radius:40upx; display:block; position:absolute; right:0upx; top:0upx; }
		}
		.zhifu_box { 
			width:100%; height:auto; display:table;
			
			.jpay { 
				width:100%; height:90upx; line-height:90upx; border-bottom:1px solid #eeeeee; position:relative; color:$font-color-999;
				
				b { padding-left:5px; color:#d10045; }
				img { height:40upx; margin-right:10upx; position:absolute; left:0px; top:50%; margin-top:-20upx; }
				.balance { width:100%; height:90upx; line-height:90upx; }
			}
			.active { background:url('/static/img/icon/selected.png') no-repeat right center; background-size:40upx auto; }
		}
		
		.invoice_box {
			width:100%; height:auto; display:table;
			
			button { margin-top:30upx; }
			.inv { width:100%; height:90upx; line-height:90upx; border-bottom:1px solid #eeeeee; position:relative; color:$font-color-999; }
			.active { background:url('/static/img/icon/selected.png') no-repeat right center; background-size:40upx auto; }
		}
	}
	
	/* 底部栏 */
	.action-section{
		position:fixed; left:0upx; bottom:0upx; z-index:95; display:flex; align-items:center; width:750upx; height:110upx; padding:0 26upx; background:#ffffff; -webkit-box-shadow:0px -1px 5px #ccc; box-shadow:0px -1px 5px #ccc;
		.total-box {
			width:100%; height:110upx;
			.price { height:60upx; line-height:76upx; font-size:38upx; color:#d13d3d; font-weight:bold; overflow:hidden; }
			.coupon { width:100%; height:50upx; line-height:32upx; font-size:$font-sm; color:$font-color-999; }
		}
		.no-border { height:110upx; line-height:110upx; padding:0 50upx; border-radius:0px; position:absolute; right:0px; bottom:0px; background:#8c0027; color:$bgcolor_white; }
	}
	
	.cart-list { border-bottom:15upx solid #f4f4f4; }
	.cart-list:nth-last-child(1) { border-bottom:0upx; }
	.seller_box {
		width:100%; flex:1; display:flex; flex-direction:column; padding:0 30upx 25upx 30upx; border-bottom:1px solid #eeeeee;
		
		.seller_name { width:100%; height:80upx; line-height:80upx; border-bottom:1px solid #eeeeee; }
		.seller_name .coolc,.seller_name b { display:block; float:left; font-size:44upx; margin-right:15upx; }
		.seller_name .coolc { margin-left:0upx; margin-top:4upx; color:$font-color-666; }
		.seller_name b { height:80upx; line-height:80upx; font-size:32upx; font-weight:500; color:$font-color-666; }
		
		/* 购物车列表项 */
		.cart-item{
			display:flex; position:relative; padding:26upx 0; border-bottom:1px solid #eeeeee;
			.image-wrapper{
				width:230upx; height:230upx; flex-shrink:0; position:relative;
				image{ width:230upx; height:230upx; border-radius:8upx; border:1px solid #eeeeee; }
			}
			.item-right{
				width:100%; overflow:hidden; position:relative; padding-left:30upx;
				
				.title { font-size:$font-base + 2upx; color:$font-color-dark; height:auto; display:table; line-height:40upx; margin-bottom:10upx; overflow:hidden; }
				.attr{ width:auto; height:50upx; line-height:50upx; display:inline-block; padding:0 22upx; font-size:$font-sm + 2upx; color:$font-color-light; background:#eeeeee; border-radius:30upx; }
				.price{ width:100%; height:30upx; line-height:30upx; font-size:30upx; color:#d10045; position:absolute; left:30upx; bottom:0px; }
				.num { height:30upx; line-height:30upx; font-size:30upx; position:absolute; right:0px; bottom:0px; }
			}
		}
		.cart-item:nth-last-child(1) { border-bottom:0px; }
		.coupon_box {
			width:100%; height:60upx; line-height:50upx; text-align:right; color:$font-color-999; margin-top:25upx; font-size:$font-base;
			b { width:auto; height:50upx; line-height:50upx; font-weight:100; display:inline-block; padding:0 22upx; font-size:$font-base; color:#fff; background:#999; border-radius:30upx; }
		}
		.seller_seller { 
			width:100%; height:50upx; line-height:50upx; text-align:right; color:$font-color-999; font-size:$font-base; 
			b { color:$font-color-red; }
		}
		.seller_total {
			width:100%; height:50upx; line-height:50upx; text-align:right; color:$font-color-999; font-size:$font-base;
			b { color:$font-color-red; }
		}
	}
</style>